<div class="apple_overlay" id="overlayM">
 <div class="navi"></div> 
 <div id = "scrollFS"> 
 
				<!-- root element for scrollable items --> 
				<div class="items"> 
 					<div class="item"> 
 					<a href ="<?php echo $this->baseUrl();?>/carte">
					<img width="750" src="<?php echo $this->baseUrl();?>/elements/images/afrique.jpg" />
					</a> 
					</div>
					<!-- items  --> 
					<div class="item">
					<a href ="<?php echo $this->baseUrl();?>/carte"> 
					<img width="750" src="<?php echo $this->baseUrl();?>/elements/images/afrique2.jpg" />
					</a> 
					</div>
					<div class="item">
					<a href ="<?php echo $this->baseUrl();?>/carte"> 
					 <img width="750" src="<?php echo $this->baseUrl();?>/elements/images/afrique3.jpg" />
					 </a>
					</div> 
					<div class="item"> 
					<a href ="<?php echo $this->baseUrl();?>/carte">
						<img width="750" src="<?php echo $this->baseUrl();?>/elements/images/afrique4.jpg" />
						</a> 
					</div> 
 
				</div> 
 
</div>
</div> 
<div style="width : 760px; margin:0 20; float : left; display:inline;">


<style> 
#main_navi {
	margin-left:-45px;
}
 
#main_navi li {
	list-style-image:none !important;
	margin-top:0 !important;
}

.apple_overlay {
	
	display:none;
	z-index:10000;
	background-color:#293627;
	width:780px;	
	min-height:200px;
	border:1px solid #666;
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background-image:url(../public/elements/images/close.png);
	position:absolute; right:-15px; top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}

</style> 
 
	
	 
	
	<style> 
	/* main vertical scroll */
	#main {
		position:relative;
		overflow:hidden;
		height: 450px;
	}
	
	/* root element for pages */
	#pages {
		position:absolute;
		height:20000em;
	}
	
	/* single page */
	.page {
		padding:10px;
		height: 450px;
		background:#293627 url(../elements/images/h600.png) 0 0 repeat-x;
		width:520px;
	}
	
	/* root element for horizontal scrollables */
	.scrollable {
		position:relative;
		overflow:hidden;
		width: 510px;
		height: 450px;
	}
	
	/* root element for scrollable items */
	.scrollable .items {
		width:20000em;
		position:absolute;
		clear:both;
	}
	
	/* single scrollable item */
	.item {
		float:left;
		cursor:pointer;
		width:500px;
		height:450px;
		padding:10px;
		color: white;
	}
	
	#scrollFS {
		position:relative;
		overflow:hidden;
		width: 790px;
		height: 750px;
	}
	
	/* root element for scrollable items */
	#scrollFS .items {
		width:30000em;
		position:absolute;
		clear:both;
	}
	
	/* single scrollable item */
	#scrollFS .item {
		float:left;
		cursor:pointer;
		width:780px;
		height:750px;
		padding:10px;
		color: white;
	}
	
	/* main navigator */
	#main_navi {
		float:left;
		padding:0px !important;
		margin:0px !important;
	}
	
	#main_navi li {
		background-color:#293627;
		border-top:1px solid #666;
		clear:both;
		color:#FFFFFF;
		font-size:12px;
		height:75px;
		list-style-type:none;
		padding:10px;
		width:190px;
		cursor:pointer;
	}
	
	#main_navi li:hover {
		background-color:#3D4F39;
	}
	
	#main_navi li.active {
		background-color:#5C7856;
	}
	
	#main_navi img {
		float:left;
		margin-right:10px;
	}
	
	#main_navi strong {
		display:block;
	}
	
	#main div.navi {
		margin-left:250px;
		cursor:pointer;
	}
	</style> 
</head> 
 

 
<!-- main navigator --> 
<ul id="main_navi"> 
 
	<li class="active"> 
		<img src="<?php echo $this->baseUrl();?>/elements/images/wadebounds1.png"/> 
		<strong>Les matrices du Sahel</strong> 
		Les d&eacute;coupages de la GMV
	</li> 
	<li> 
		<img src="<?php echo $this->baseUrl();?>/elements/images/video.png"/> 
		<strong>Les vid&eacute;os</strong> 
		vid&eacute;os sur la bande verte
	</li> 
	<li> 
		<img src="<?php echo $this->baseUrl();?>/elements/images/verte.jpg" /> 
		<strong>Financer la GMV</strong> 
		Faites un acte &eacute;cologique
	</li> 
</ul> 
 
<!-- root element for the main scrollable --> 
<div id="main"> 
 
	<!-- root element for pages --> 
	<div id="pages"> 
 
		<!-- page #1 --> 
		<div class="page" id= "page1"> 
 
			<!-- sub navigator #1 --> 
			<div class="navi"></div> 
 			<div id="Fs" style= "position : absolute; top : 0; "><a href="#"><img rel="#overlayM" src="<?php echo $this->baseUrl();?>/elements/images/fullscreen-gtk-icone-7340-32.png" /> </a></div>
			<!-- inner scrollable #1 --> 
			<div class="scrollable"> 
 
				<!-- root element for scrollable items --> 
				<div class="items"> 
 					<div class="item"> 
 					<a href ="<?php echo $this->baseUrl();?>/carte">
					<img width="480" src="<?php echo $this->baseUrl();?>/elements/images/afrique.jpg" />
					</a> 
					</div>
					<!-- items  --> 
					<div class="item"> 
					<a href ="<?php echo $this->baseUrl();?>/carte">
					<img width="480" src="<?php echo $this->baseUrl();?>/elements/images/afrique2.jpg" />
					</a> 
					</div>
					<div class="item"> 
					<a href ="<?php echo $this->baseUrl();?>/carte">
					 <img width="480" src="<?php echo $this->baseUrl();?>/elements/images/afrique3.jpg" />
					 </a>
					</div> 
					<div class="item"> 
					<a href ="<?php echo $this->baseUrl();?>/carte">
						<img width="480" src="<?php echo $this->baseUrl();?>/elements/images/afrique4.jpg" />
					</a> 
					</div> 
 
				</div> 
 
			</div> 
			
 
		</div> 
 
		<!-- page #2 --> 
		<div class="page"> 
 
			<div class="navi"></div> 
 
			<!-- inner scrollable #2 --> 
			<div class="scrollable"> 
 
				<!-- root element for scrollable items --> 
				<div class="items"> 
 
					<!-- items on the second page --> 
					<div class="item"> 
						<object width="480" height="360"><param name="movie" value="http://www.dailymotion.com/swf/video/xaxffu?additionalInfos=0"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/xaxffu?additionalInfos=0" width="480" height="360" allowfullscreen="true" allowscriptaccess="always"></embed></object><br /><b><a href="http://www.dailymotion.com/video/xaxffu_sahara-la-grande-muraille-verte-con_news">Sahara: La &quot;Grande Muraille Verte&quot; contre la d&eacute;sertification</a></b><br /><i>envoy&eacute; par <a href="http://www.dailymotion.com/Nzwamba">Nzwamba</a>. - <a href="http://www.dailymotion.com/fr/channel/news">L&#039;info video en direct.</a></i>
					</div> 
					<div class="item"> 
						<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/0uFJPnGXnSM?fs=1&amp;hl=fr_FR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/0uFJPnGXnSM?fs=1&amp;hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
					</div> 
					<div class="item"> 
						<object width="480" height="340"><param name="movie" value="http://www.youtube.com/v/vlV56A0wV1Y?fs=1&amp;hl=fr_FR&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/vlV56A0wV1Y?fs=1&amp;hl=fr_FR&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="340"></embed></object>
					</div> 
 
				</div> 
 
			</div> 
 
		</div> 
 
		<!-- page #3 --> 
		<div class="page"> 
 
			<div class="navi"></div> 
 
			<!-- inner scrollable #3 --> 
			<div class="scrollable"> 
 
				<!-- root element for scrollable items --> 
				<div class="items"> 
 
					<!-- items on the first page --> 
					<div class="item"> 
					
						<img src="<?php echo $this->baseUrl();?>/elements/images/Sauver.png" /> 
					</div> 
					<div class="item"> 
						<a href ="<?php echo $this->baseUrl();?>/carte"><img src="<?php echo $this->baseUrl();?>/elements/images/matrice.png" /> </a>
						<span style ="font-weight:normal;	color:#ddd;	letter-spacing:1px;	margin:10px 0 0 0;	font-size:15px;	">Acc&eacute;dez &agrave; notre interface pour contribuer en ach&eacute;tant des terrains et par sponsoring d'arbre </span>
					</div> 
					<div class="item"> 
							<a href ="<?php echo $this->baseUrl();?>/carte"><img src="<?php echo $this->baseUrl();?>/elements/images/matricecertif.png" /> </a>
							<span style ="font-weight:normal;	color:#ddd;	letter-spacing:1px;	margin:10px 0 0 0;	font-size:15px;	">Votre contribution sera attest&eacute; par un certificat et des droits de propri&eacute;t&eacute; sur toutes les acquisitions de terrains</span>
					
					</div> 
 
				</div> 
 
			</div> 
 
		</div> 
 
	</div> 
 
</div> 
 </div>
 
 
<script> 
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(document).ready(function() {
 
 
 
// main vertical scroll
$("#main").scrollable({
 
	// basic settings
	vertical: true,
	
	// up/down keys will always control this scrollable
	keyboard: 'static',
 
	// assign left/right keys to the actively viewed scrollable
	onSeek: function(event, i) {
		horizontal.eq(i).data("scrollable").focus();
	}
 
// main navigator (thumbnail images)
}).navigator("#main_navi");
 
// horizontal scrollables. each one is circular and has its own navigator instance
var horizontal = $(".scrollable").scrollable({ circular: true }).navigator(".navi").autoscroll({
	interval: 7000		
});;
 
  $("#scrollFS").scrollable({ circular: true }).navigator(".navi").autoscroll({
	interval: 7000		
});;
 
// when page loads setup keyboard focus on the first horzontal scrollable
horizontal.eq(0).data("scrollable").focus();
 
});

$(function() {
	$("img[rel]").overlay({top : "2%"});
});
</script> 
 
 